/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-26 14:52:51
 * @LastEditors: chenbinfa
 * @LastEditTime: 2023-01-17 11:38:35
 * @description: 描述信息
 * @author: chenbinfa
 */
import React, { useRef, useState, useEffect } from "react";
import { message } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import _ from "lodash";
import styled from "styled-components";
import copy from "copy-to-clipboard";
import DCard from "@/components/DCard";
import { useNavigate } from "react-router-dom";

const Main = ({ className, accountInfo }) => {
	if (!accountInfo) {
		return '';
	}
	const navigator = useNavigate();
	const [revenueAccount, setRevenueAccount] = useState();

	useEffect(() => {
		setRevenueAccount(accountInfo.accountId);
	}, [accountInfo]);


	return (
		<div className={className}>
			<DCard className="bbbox" icon={<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/holder.png"} />} title="Account">
				<div className="info enable-copy-txt-box">
					<span>{revenueAccount}</span> <CopyOutlined className="copy-icon" onClick={() => {
						copy(revenueAccount);
						message.success("Copied");
					}} /></div>
			</DCard>
		</div>
	);
};

export default React.memo(styled(Main)`
    display: block;
	.info{
		margin:30px 10px;
	}
	@media screen and (max-width: 700px) {
		.info{
			margin:30px 20px;
			width:calc(100% - 40px);
			word-wrap: break-word; 
			overflow-wrap: break-word;
		}
	}
`);
